<template>
  <div class="distribution-red-packer">
    <c-title text="领取红包"></c-title>
    <div class="head">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/new_distribution_red_packet.png" />
      <div class="price" v-if="today_receive == 0">
        <span>?</span>
        <span>?</span>
        <span>?</span>
        <span>?</span>
        <span class="unit">元</span>
      </div>
      <div class="show-price" v-else>{{ $i18n.t('money') }}{{ amount }}</div>
      <van-button class="button" @click="submit">{{ today_receive == 0 ? '领取红包' : '已领取' }}</van-button>
    </div>
    <div class="foot">
      <van-tabs v-model="active" title-active-color="#FF8924">
        <van-tab title="领取记录">
          <van-cell v-for="(item, i) in list" :key="i" center title-style="text-align:left">
            <div slot="title" class="title">
              <van-image width="2.25rem" height="2.25rem" style="flex-shrink: 0;"
                :src="item.has_one_member && item.has_one_member.avatar" round alt="" />
              <div class="box">
                <span>{{ item.has_one_member ? item.has_one_member.nickname : 'null' }}</span>
                <span class="label">{{ item.created_at }}</span>
              </div>
            </div>
            <span slot="default" class="right-value">{{ item.amount }}</span>
          </van-cell>
        </van-tab>
      </van-tabs>
    </div>

    <p class="tips" v-if="current_page == last_page">没有更多喽~</p>

    <van-overlay :show="show_cover" @click="show_cover = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/new_distribution_red_packet_cover.png" />
          <button class="get-button " @click="confirm">领</button>
          <div class="get-button-bg"></div>
          <p class="please">请点击领取按钮领取红包</p>
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="show-price">{{ $i18n.t('money') }}{{ red_packet_amount }}</div>
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/new_distribution_red_packet.png" />
          <van-button class="button" @click="Hidden">知道了</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Image as VanImage, Dialog } from 'vant';
import { scrollMixin } from '../../../utils/mixin';
export default {
  components: { VanImage },
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      show: false,
      list: [],
      show_cover: false,

      red_packet_amount: 0,
      video_list: [],
      amount: 0,
      today_receive: 0,
      is_rest: 0,

      redpack_video_state: 0,
      current_page: 1,
      last_page: 1,
      isLoadMore: true,
    };
  },
  activated() {
    this.isLoadMore = true;
    this.show = false;
    this.show_cover = false;
    this.getData();
    this.getList(1);

  },
  methods: {
    getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      }
      let page = this.current_page + 1;
      this.getList(page);
    },
    Hidden() {
      this.getList();
      this.show = false;
    },
    getList(page = 1) {
      $http.get("plugin.commission-performance.frontend.redpack.getList", { is_sub_page: page }).then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg)
        }
        let data = res.data.list;
        this.current_page = data.current_page;
        this.last_page = data.last_page;
        if (data.current_page == 1) {
          this.list = data.data;;
        } else {
          this.list = this.list.concat(data.data);
        }
      })
    },

    getData() {
      $http.get("plugin.commission-performance.frontend.redpack.index").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let data = res.data;
        this.redpack_video_state = data.redpack_video_state;
        this.video_list = data.video_list;
        this.today_receive = data.today_receive;
        this.amount = data.amount;
        this.is_rest = data.is_rest;
        if (this.$route.params.vid && this.$route.params.finish == 1 && data.is_rest == 1 && data.today_receive == 0) {
          this.show_cover = true;
        }
      })
    },
    confirm() {
      let json = {}
      if (this.redpack_video_state == 1) {
        json.video_id = this.$route.params.vid;
      }
      $http.post("plugin.commission-performance.frontend.redpack.receive", json, '').then(res => {
        this.show_cover = false;
        if (res.result) {
          this.red_packet_amount = res.data.amount;
          this.show = true;
          this.getData();
        } else {
          this.$toast(res.msg);
        }
      })
    },
    submit() {
      if(this.today_receive ==  1){
        return;
      }
      $http.get("plugin.commission-performance.frontend.redpack.index").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let data = res.data;
        if (data.redpack_video_state == 0) {//不需要看视频领取红包
          this.show_cover = true;
          return;
        }
        let i = Math.floor(Math.random() * data.video_list.length)
        Dialog.confirm({
          title: '观看视频领取红包', confirmButtonText: "去观看", cancelButtonColor: "#7E7E7E"
        })
          .then(() => {
            this.$router.push(this.fun.getUrl("VideoDetail", {}, { vid: data.video_list[i].id, plugin_type: "new_distribution" }));
          })
          .catch(() => {
            // on cancel
          });

      })



    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-tabs__line {
  background-color: rgb(255, 137, 36);
}

.distribution-red-packer {
  background: #FFEEE0;
  min-height: 100vh;
  padding: 0.75rem;

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .show-price {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 3.125rem;
    font-size: 2.0625rem;
    color: #7F3A15;
  }

  .block {
    position: relative;
    width: 18.125rem;
    height: 14.2188rem;

    .please {
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.8125rem;
      font-size: 0.75rem;
    }

    img {
      width: 100%;
      height: 100%;
    }

    .get-button {
      position: absolute;
      top: 5.8438rem;
      left: 0;
      right: 0;
      width: 4.625rem;
      height: 4.625rem;
      line-height: 2.25rem;
      margin: 0 auto;
      border-radius: 3.125rem;
      font-size: 2rem;
      color: #7F3A15;
      font-weight: 500;
      background: linear-gradient(180deg, #FAE05B 0%, #F89800 100%);
      border: none;
      z-index: 10;
    }

    .get-button-bg {
      position: absolute;
      top: 5.625rem;
      left: 0;
      right: 0;
      width: 5rem;
      height: 5rem;
      margin: 0 auto;
      background-color: #F06B4F;
      opacity: .3;
      border-radius: 3.125rem;
      z-index: 1;
    }

    .button {
      position: absolute;
      left: 0;
      right: 0;
      width: 14.6875rem;
      height: 2.25rem;
      line-height: 2.25rem;
      bottom: 2.5313rem;
      margin: 0 auto;
      border-radius: 1.5625rem;
      font-weight: 500;
      background: linear-gradient(180deg, #FAE05B 0%, #F89800 100%);
      border: 0.1563rem solid #E93E43;
      color: #7F3A15;
    }
  }

  .show-more {
    text-align: center;
    color: #AAAAB3;
    font-weight: 400;
    margin: 0.75rem 0;

  }

  .van-icon-arrow-down {
    margin-left: 0.125rem;
    font-size: 0.75rem;
  }

  .unit {
    font-size: 1.375rem;
  }

  .price {
    position: absolute;
    left: 5.0938rem;
    top: 3.8125rem;
    width: 11.5rem;
    height: 2.5625rem;
    line-height: 2.5625rem;
    font-size: 2.75rem;
    color: #7F3A15;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .box {
    margin-left: 0.25rem;
    display: flex;
    flex-direction: column;
  }

  .tips {
    text-align: center;
    color: #AAAAB3;
    font-size: 0.8438rem;
    margin-top: 0.75rem;
  }

  .title {
    display: flex;
    align-items: center;
  }

  .right-value {
    height: 0.875rem;
    line-height: 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3B3B4A;
  }

  .label {
    height: 0.75rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: .75rem;
    color: #AAAAB3;
    white-space: nowrap;
  }

  .foot {
    margin-top: 0.75rem;
    background: #fff;
    border-radius: 0.3125rem;
    overflow: hidden;
  }

  .head {
    position: relative;
    width: 100%;
    height: 17.4063rem;

    img {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    .button {
      position: absolute;
      left: 0;
      right: 0;
      width: 18.25rem;
      height: 3rem;
      line-height: 3rem;
      bottom: 2.5313rem;
      font-size: 36rpx;
      margin: 0 auto;
      border-radius: 1.5625rem;
      background: linear-gradient(180deg, #FAE05B 0%, #F89800 100%);
      border: 0.1563rem solid #E93E43;
      color: #7F3A15;
    }
  }
}
</style>
